<script lang="ts" context="module">
  import  { type Column, type CheckCellOptionTypeFunc, getCellContentType } from "./conf";
</script>
<script lang="ts">
  export let col: Column;
  export let item: any = undefined;
  export let to: string | CheckCellOptionTypeFunc<string>;
  export let text: string | CheckCellOptionTypeFunc<string> = "";
  $: href = getCellContentType(to || col.options.linkOption?.href, item);
  $: label = getCellContentType(text || col.options.text || item[col.key], item);
  $: linkable = col.options.linkOption?.matcher ? col.options.linkOption?.matcher(item) : true;
</script>
<div class="link-cell-container" style="--cell-align: {col.options?.align}">
  {#if linkable}
    <a class="link-cell-item" {href}>{label}</a>  
  {:else}
    {label === undefined ?  "" : label}
  {/if}
</div>
<style lang="postcss">
  .link-cell-container {
		@apply px-2;
    text-align: var(--cell-align, left);
	}
  .link-cell-item {
    @apply underline underline-offset-4;
  }
</style>